
<!-- 写html代码 -->
<template>
     <div class="demo">
           学校：{{name}}
           <br>
           地址：{{address}}
           <br>
     </div>  
</template>

<!-- 写js代码 -->
<script>
/**
 * (1) 使用默认暴露的方式的原因是 在别的文件调用的时候不用写括号：例如 import xxx from xxx
 * 而是用其他的 就得写括号：import {xxx/... } from xxx
 * (2) 不需要再写 Vue.extend 因为这个文件后缀名一看就是个组件不用显式地再写一遍说明准备添加个组件
 * (3) 单文件组件的好处就是 把各个代码分类地很清楚，而且各个类别只要写个核心代码就行，该去除的都去除了
 * */ 
    export default {
      /**
       * (4) 组件名字：一定要使用大驼峰，因为js编译的时候默认会变成大驼峰
       *              最好要和文件名字一样，等于是让别人知道文件名就知道组件叫什么
       * */ 
      name:'School',
      data(){
            return {
               name:'尚硅谷',
               address:'北京昌平'
          }
      }
  }
</script>

<!-- 写样式代码 -->
<style>
   .demo{
      background-color: brown;
   }
</style>